
<template>
	<div>
		<div style="display: flex; justify-content: center;margin-top: 30px;">
			<h3>
				性别比
			</h3>
		</div>
		<div>
			<v-chart style="height:170px;" :option="option"></v-chart>
		</div>
	</div>
</template>

<script>
import sexRatioService from "@/api/organization/sexRatioService.js";
export default {
	props: { 
		postId:"",
	},
	data() {
		return {
			charData:[
				{
					value: 0,
					name: "男",
				},
				{
					value: 0,
					name: "女",
				},
			],
			option: {},
			loading: false,
			
		};
	},
	mounted() {
		this.init()
	},
	
	watch: {
		
	},
	methods: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
		init(){
			this.loading = true;
			// let postId=this.currentUser().postIdList[0]
			sexRatioService.selectSexRatio(postId)
			.then((data)=>{
				this.charData[0].value=data.male
				this.charData[1].value=data.female
				this.initChart()
				this.loading = false;
			});
		},
		initChart(){
			this.option= {
						textStyle: {
						fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
					},
					title: {
						text: "",
						left: "center",
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)",
					},
					legend: {
						orient: "vertical",
						left: "left",
						data: ["男", "女"],
					},
					series: [
						{
							name: "性别比",
							type: "pie",
							radius: "55%",
							center: ["50%", "60%"],
							//数据绑定
							data: this.charData,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: "rgba(0, 0, 0, 0.5)",
								},
							},
						},
					],
				}
		}
	},
};
</script>
<style scoped>

</style>
